<template>
  <div class="editInputDialogBox">
    <el-dialog
      :visible.sync="show"
      custom-class="editInputDialog"
      :before-close="handleClose"
      append-to-body
      :center="true"
    >
      <div class="title">正在编辑引导文的评阅标准、参考答案</div>
      <div class="contentBox" v-if="show">
        <div class="standard">
          <h3>评阅标准</h3>
          <edit
            :editId="'standard-' + currTaskIndex"
            :gindex="currTaskIndex"
            @submit="handleSaveData($event, 'remarkStandard')"
            :gitem="gitem"
            :key="'standard-' + currTaskIndex"
            :currGroupIndex="currGroupIndex"
            :currTaskIndex="currTaskIndex"
            :showOtherTool="false"
            :isMyCaeate="isMyCaeate"
            :isOtherDesiger="isOtherDesiger"
            :showUnopenBtn="true"
            :canEdit="canEdit"
            :placeholder="'请输入评阅标准'"
            :objKeyName="'remarkStandard'"
            :showEditAnswerBtn="false"
          />
        </div>
        <div class="answer">
          <h3>参考答案</h3>
          <edit
            :editId="'answer-' + currTaskIndex"
            :gindex="currTaskIndex"
            @submit="handleSaveData($event, 'refAnswer')"
            :gitem="gitem"
            :key="'answer-' + currTaskIndex"
            :currGroupIndex="currGroupIndex"
            :currTaskIndex="currTaskIndex"
            :showOtherTool="false"
            :isMyCaeate="isMyCaeate"
            :isOtherDesiger="isOtherDesiger"
            :showUnopenBtn="true"
            :canEdit="canEdit"
            :placeholder="'请输入参考答案'"
            :objKeyName="'refAnswer'"
            :showEditAnswerBtn="false"
          />
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
const edit = () => import("../editComponent/edit");
export default {
  components: {
    edit,
  },
  data() {
    return {
      show: false,
    };
  },
  props: {
    showEditInput: Boolean,
    gitem: Object,
    gindex: Number,
    currGroupIndex: Number,
    currTaskIndex: Number,
    isMyCaeate: Boolean,
    isOtherDesiger: Boolean, // 是否是其它课程设计师
    canEdit: Boolean,
    isContinuousPublish: Boolean,
  },
  watch: {
    showEditInput(newValue) {
      this.show = newValue;
    },
  },
  methods: {
    handleClose() {
      this.$emit("handleEditInputClose");
    },
    handleSaveData(val, keyName) {
      this.$emit("handleChangeEditInput", val, keyName);
    },
  },
};
</script>

<style lang="stylus">
.editInputDialog {
  min-width: 300px;
  max-width: 500px;

  .el-dialog__header, .el-dialog__body {
    padding: 0;
  }

  .title {
    padding-bottom: 20px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
  }

  .contentBox {
    .edit {
      padding: 13px 11px;
      min-height: 100px;
      max-height: 250px;
      overflow-y: scroll;

      .w-e-text {
        padding: 0;
        min-height: 100px;
        height: 100%;
        display: block;
      }
    }

    .edit::-webkit-scrollbar {
      width: 4px;
      height: 1px;
    }

    /* 定义滚动条的滑块的样式有圆角和阴影以及自定义的背景色 */
    .edit::-webkit-scrollbar-thumb {
      -webkit-box-shadow: inset 0 0 1px rgba(195, 197, 198, 0.1);
      background: #ccc;
      border-radius: 10px;
    }

    /* 定义滚动条所在轨道的样式。有圆角和阴影以及淡色系的背景色 */
    .edit::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 1px rgba(195, 197, 198, 0.1);
      border-radius: 4px;
    }

    .placeholder {
      margin-top: 10px;
    }
  }
}
</style>